<template>
  <el-row :gutter="20">
    <el-form label-width="80px" :model="form">
      <el-col :span="6">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
        <el-form-item label="登录名">
          <el-input v-model="form.userName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="电话号码">
          <el-input v-model="form.tel"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="状态">
          <el-select
            v-model="form.status"
            placeholder="请选择活动区域"
            clearable
            class="select-width"
          >
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
            <el-option label="锁定" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6" :offset="18" style="text-align: right">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button>重置</el-button>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      labelPosition: "right",
      form: {
        name: "",
        userName: "",
        tel: "",
        status: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    handleSearch() {
      this.form.status = this.form.status ? Number(this.form.status) : 0;
      this.$emit("getTableData", this.form);
    },
  },
};
</script>
